<script setup>

import Panel from '@components/Panel.vue'
import {User} from '@utils/resource'
import {validateForm, validFieldExists} from '@utils/element-helper'
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import Background from "@components/Background";
import {commonStore} from "@/store/common";

const router = useRouter();
const commonStore1 = commonStore()
const formState = reactive({
  form: {
    name: '',
    pass: '',
    email: '',
    phone: '',
  },
  error: "",
  loading: false,
  rules: {
    name: [
      {required: true, message: '账号不能为空', trigger: 'blur'},
      {
        validator, trigger: 'blur'
      }
    ],
    email: [
      {required: true, message: '邮箱地址不能为空', trigger: 'blur'},
      {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur']},
      {
        validator, trigger: 'blur'
      }
    ],
    phone: [
      {required: true, message: '手机号码不能为空', trigger: 'blur'},
      {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'},
      {
        validator, trigger: 'blur'
      }
    ],
    pass: [
      {required: true, message: '密码不能为空', trigger: 'blur'},
      {min: 5, max: 25, message: '密码长度在 5 到 25 位之间', trigger: 'blur'},
    ],
  }
})


function validator(rule, value, callback) {
  validFieldExists(rule, value, callback, true, (rule, value) => User.registerCheckExists(rule, value))
}

const form = ref(null)

function submitForm(formName) {
  validateForm(form.value, formName, async () => {
    formState.loading = true
    await User.register(formState.form)
    formState.loading = false
    ElMessage({
      message: '注册成功',
      type: "success"
    })
    setTimeout(() => {
      router.push({path: "/login"})
    }, 1000)
  })
}

</script>

<template>
  <background>
    <panel title="注册" type="panel-primary login-panel"
           pstyle="-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2);box-shadow: 0 0 50px rgba(0, 0, 0, .2);">
      <template v-slot:body>
        <div style="text-align: center;margin-bottom: 20px">
          <div class="sking-admin-logo">{{commonStore1.systemName}}</div>
        </div>

        <el-form ref="form" :model="formState.form" label-width="80px" status-icon :rules="formState.rules"
                 v-loading="formState.loading"
                 label-position="right">
          <el-form-item label="账号：" prop="name" :error="formState.error">
            <el-input v-model="formState.form.name" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email" :error="formState.error">
            <el-input v-model="formState.form.email" type="email" autocomplete="off" placeholder="邮箱"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone" :error="formState.error">
            <el-input v-model="formState.form.phone" type="tel" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="pass">
            <el-input v-model="formState.form.pass" type="password" placeholder="密码"></el-input>
          </el-form-item>
          <div style="margin-top: 80px;">
            <el-button type="primary" style="width: 100%;" @click="submitForm('form')">提交</el-button>
          </div>
        </el-form>
      </template>
    </panel>
  </background>
</template>


<style lang="scss" scoped>

.login-panel {
  width: 350px;
  min-height: 350px;
}

</style>
